<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>Example</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./plugins/swiper/swiper-bundle.min.css">
    <script src="./js/vue.min.js"></script>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>

<body>
    <div id="app">
        <m-Header></m-Header>

        <div class="banner">
            <div class="banner-wrapper">
                <div class="banner-left">
                    <m-Search></m-Search>
                </div>
                <div class="banner-right">
                    <div class="banner-games">
                        <div class="swiper-btn left" @click="handleChangePrev"><img src="./imgs/arrowleft.svg"
                                alt="arrowleft"></div>
                        <div class="swiper-btn right" @click="handleChangeNext"><img src="./imgs/arrowright.svg"
                                alt="arrowright"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="game in games" :key="game.gameId">
                                    <m-Box :game="game"></m-Box>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <main>

            <m-Block title="Featured Games" @prev="handleFeatturedPrev" @next="handleFeatturedNext">
                <div class="featured-swiper common-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="game in features" :key="game.gameId">
                            <m-Box type="big" :game="game"></m-Box>
                        </div>
                    </div>
                </div>
            </m-Block>

            <m-Block title="Popular Now" @prev="handlePopularPrev" @next="handlePopularNext">
                <div class="popular-swiper common-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="mix in popular">
                            <div class="mix" v-for="game in mix" style="padding-bottom: 10px;">
                                <m-Box type="small" :game="game"></m-Box>
                            </div>
                        </div>
                    </div>
                </div>
            </m-Block>

            <m-Hot></m-Hot>

        </main>

        <m-Footer></m-Footer>

    </div>
</body>
<script src="./main.js"></script>
<script src="./plugins/swiper/swiper-bundle.min.js"></script>
<script type="module">
    import { Header, Footer, Block, Box, Search } from './components/index.js'
    import { games, features, popular, hot } from './js/game.js'
    import Hot from './components/hot.js'
    var vm = new Vue({
        el: '#app',
        components: {
            mHeader: Header,
            mFooter: Footer,
            mBlock: Block,
            mBox: Box,
            mHot: Hot,
            mSearch: Search
        },
        data() {
            return {
                games,
                features,
                popular,
                hot,
                bannerSwiper: null,
                featturedSwiper: null,
                popularSwiper: null
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(() => {
                this.loadBannerSwiper()
                this.loadFeaturedSwiper()
                this.loadPopularSwiper()
            })
        },
        methods: {
            handleToDetail(gameId) {
                return `./detail.html?id=${gameId}`
            },
            loadBannerSwiper() {
                this.bannerSwiper = new Swiper(".swiper", {
                    breakpoints: {
                        768: {  //当屏幕宽度大于等于768 
                            slidesPerView: 3,
                            spaceBetween: 20
                        },
                        960: {
                            slidesPerView: 5,
                            spaceBetween: 15,
                        },
                        1170: {
                            slidesPerView: 7,
                            spaceBetween: 15,
                        },
                        1440: {  //当屏幕宽度大于等于1280
                            slidesPerView: 9,
                            spaceBetween: 15,
                        },
                    }
                });
            },
            loadFeaturedSwiper() {
                this.featturedSwiper = new Swiper(".featured-swiper", {
                    breakpoints: {
                        480: {
                            slidesPerView: 2,
                            spaceBetween: 10,
                        },
                        768: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        1440: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        }
                    }
                });
            },
            loadPopularSwiper() {
                this.popularSwiper = new Swiper(".popular-swiper", {
                    breakpoints: {
                        200: {
                            slidesPerView: 2,
                            spaceBetween: 10,
                        },
                        480: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        640: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        },
                        960: {
                            slidesPerView: 6,
                            spaceBetween: 10,
                        },
                        1280: {
                            slidesPerView: 7,
                            spaceBetween: 10,
                        },
                        1440: {
                            slidesPerView: 8,
                            spaceBetween: 10,
                        }
                    }
                });
            },
            handleChangePrev() {
                this.bannerSwiper.slidePrev()
            },
            handleChangeNext() {
                this.bannerSwiper.slideNext()
            },
            handleFeatturedPrev() {
                this.featturedSwiper.slidePrev()
            },
            handleFeatturedNext() {
                this.featturedSwiper.slideNext()
            },
            handlePopularPrev() {
                this.popularSwiper.slidePrev()
            },
            handlePopularNext() {
                this.popularSwiper.slideNext()
            }
        }
    })
</script>

</html>